<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <%@include file="../../common/include_list_head.jsp" %>
    <title>添加功能配置</title>

    <script type="text/javascript">
        detailPageStyle();

        validate_required_fields = [
            {fieldId:"name", message:"功能名称不能为空！", mustMatch: true},
            {fieldId:"style", message:"展现样式不能为空！", mustMatch: true},
            {fieldId:"orderno", message:"排序号不能为空！",mustMatch:true }
        ];
        function doSave(){
            if(isValidateForm()){
                super_doSave();
            }
        }
        function dosavenew(){
            doSave();
        }
        function dosaveclose(){
            doSave();
            parent.closeEntityWindow();
        }

        //切换展现样式
        function changeStyle(){
           var _str=($("#style").val());
            if(_str == 2){
                $(".dbcdys").show();
                $(".ctlbys").hide();
            }else{
                $(".dbcdys").hide();
                $(".ctlbys").show();
            }
        }

        $(document).ready(function () {
            //点击图标库中的图片,设置图标
            $(".iconDiv li").click(function () {
                $(".choosed").removeClass("choosed");
                var iconName = $(this).attr("s");
                $("#img").val(iconName);
                $(this).find("div:first").addClass("choosed");
                $(".tbDiv img").attr("src", "${basePath}/resources/appicons/" + iconName).show();
                $(".iconDiv,.popupDiv").hide();
            });
            //点击设置图标
            $(".editIcon").click(function () {
                $(".popupDiv,.iconDiv").show();
            });
            //点击弹出层
            $(".popupDiv").click(function () {
                $(".popupDiv,.iconDiv").hide();
            });

            //菜单名称失去焦点时
            $("#menuname").blur(function () {
                $(".iconTitle").html($(this).val());
            });

            $(".iconDiv").css({"left": "60px", "top": "20px", "width": $(window).width() - 120, "height": $(window).height() - 60});
            //初始化展现样式
            changeStyle();
        });
    </script>
    <style type="text/css">
    .popupDiv {
        background-color: #333;
        filter: alpha(opacity=50);
        opacity: 0.5;
        z-index: 9999;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
    }

    .iconDiv {
        z-index: 10001;
        width: 830px;
        height: 600px;
        overflow: auto;
        position: absolute;
        top: 0;
        left: 100px;
        background-color: #ccc;
        padding: 10px 20px;
        display: none;
    }

    .iconDiv ul {
        margin: 0;
        padding: 0;
    }

    .iconDiv ul li {
        float: left;
        list-style: none;
        margin: 0 8px 8px 0;
        display: inline-block;
        padding: 0;
        width: 153px;
        height: 100px;
        position: relative;
        cursor: pointer;
        background-color: ${tsysMenu.bgcolor};
    }
    .iconDiv ul li div.iconDivParent {
        height: 97px;
    }

    .iconDiv ul li div.choosed {
        border: 3px solid red;
    }

    .iconDiv ul li div img {
        position: absolute;
        width: 60px;
        height: 60px;
        left: 46px;
        top: 15px;
    }


    .iconDiv ul li div .iconTitle {
        position: absolute;
        color: #fff;
        font-family: 'Microsoft YaHei';
        text-decoration: none;
        width: 100%;
        text-align: center;
        font-size: 14px;
        top: 75px;
    }

    .tbDiv {
        padding: 0;
        width: 60px;
        height: 60px;
        position: relative;
        float: left;
    }

    .tbDiv img {
        position: absolute;width: 60px;height: 60px;
    }

    .tbDiv .iconTitle {
        position: absolute;
        color: #fff;
        font-family: 'Microsoft YaHei';
        text-decoration: none;
        width: 100%;
        text-align: center;
        font-size: 14px;
        top: 75px;
    }

    .editIcon {
        cursor: pointer;
        color: blue;
        margin-top:30px;
    }

    .editTbDiv {
        float: left;
        margin-left: 20px;
    }

    .editTbDiv div {
        line-height: 35px;
    }
    </style>

</head>

<body style="text-align:center;">

<div class="box1" >
    <s:form name="theform" method="post" theme="simple" >
        <s:hidden name="appFunctionConfig.id" />
        <fieldset>
            　 <legend>添加功能配置</legend>
            <table width="100%" border="0" align="center">
                <tr>
                    <td align="right">功能名称：</td>
                    <td align="left">
                        <s:textfield id="name" name="appFunctionConfig.name" maxlength="50" size="20" cssStyle="width:300px;"/>
                        <label style="color:red">*</label></td>
                </tr>
                <tr>
                    <td align="right" nowrap="nowrap">展现样式：</td>
                <td align="left">
                    <s:select id="style" name="appFunctionConfig.style" list="AppZxys" listKey="id" listValue="caption" headerKey="" headerValue="---请选择---" onchange="changeStyle()"/>
                    <label style="color:red">*</label></td>
                </tr>

                <tr>
                    <td align="right" valign="top">图标：</td>
                    <td align="left"><s:hidden id="img" name="appFunctionConfig.img"/>
                        <div id="tbDivcp3" class="tbDiv">
                            <img src="${basePath}/resources/appicons/<s:property value="appFunctionConfig.img"/>"
                                 onerror="this.src='${basePath}/resources/appicons/default.png'" >
                        </div>
                        <div>
                            <div class="editIcon">设置图标</div>
                        </div>
                        <div style="clear: both;"></div>
                    </td>
                </tr>

                <tr>
                    <td align="right" nowrap="nowrap">排序号：</td>
                    <td align="left"><s:textfield id="orderno" name="appFunctionConfig.orderno" maxlength="300" size="20" cssStyle="width:300px;"/> <label style="color:red">*</label></td>
                </tr>
                    <tr class="ctlbys" >
                        <td align="right" nowrap="nowrap">链接：</td>
                        <td align="left"><s:textfield id="link" name="appFunctionConfig.link" maxlength="300" size="20" cssStyle="width:300px;"/></td>
                    </tr>
                    <tr class="ctlbys" >
                        <td align="right" nowrap="nowrap">sql：</td>
                        <td align="left">
                            <s:select id="wid" name="appFunctionConfig.wid" list="AppXX" listKey="id" listValue="caption" headerKey="" headerValue="---请选择---" />
                        </td>
                    </tr>
                    <tr class="ctlbys" >
                        <td align="right" nowrap="nowrap">上级id：</td>
                        <td align="left">
                            <s:select id="superid" name="appFunctionConfig.superid" list="SuperId" listKey="id" listValue="caption" headerKey="" headerValue="---请选择---" />
                        </td>
                    </tr>
                    <tr class="dbcdys">
                        <td align="right" nowrap="nowrap">功能类别：</td>
                        <td align="left">
                            <s:select id="functionid" name="appFunctionConfig.functionid" list="AppFun" listKey="id" listValue="caption" headerKey="" headerValue="---请选择---" />
                            <label style="color:red">*</label></td>
                    </tr>

                <tr>
                    <td align="right" nowrap="nowrap">是否启用：</td>

                    <td align="left">
                        <s:radio cssClass="validate[required] radio" name="appFunctionConfig.isuse" list="#{1:'启用', 0:'禁用'}" listKey="key" listValue="value" />
                        <label style="color:red">*</label></td>
                </tr>
            </table>
            <div class="popupDiv"></div>
            <div class="iconDiv">
                <ul>
                    <s:iterator value="listIcon" var="icon">
                        <li s="<s:property value="icon"/>">
                            <div class="iconDivParent <s:if test="tsysMenu.tb == #icon">choosed</s:if>">
                                <img src="${basePath}/resources/appicons/<s:property value="icon"/>" >
                                <div class="iconTitle" style="color: <s:property value="tsysMenu.color" />"><s:property value="tsysMenu.menuname"/></div>
                            </div>
                        </li>
                    </s:iterator>
                </ul>
            </div>
        </fieldset>

    </s:form>
</div>
<div class="padding_top10">
    <table class="tableStyle" transMode="true">
        <tr>
            <td colspan="4">
                <input type="button" id="ysSaveButton" value=" 保 存 " onclick="doSave()"/>
                <input type="button" value=" 关 闭 " onclick="parent.closeEntityWindow()"/>
                <s:if test="actionErrors.size()>0 || actionMessages.size()>0 || fieldErrors.size()>0">
						<span id="SystemErrorMessage" style="top: 20px">
							<s:actionerror cssStyle="color:red"/>
							<s:actionmessage cssStyle="color:blue"/>
							<s:fielderror/>
						</span>
                </s:if>
            </td>
        </tr>
    </table>
</div>
</body>
</html>
